<template>
    <div class="task-card">
      <div class="task-header">
        <div class="task-title">
          {{ task.title }}
          <span 
            v-if="task.category" 
            class="task-category"
            :style="categoryStyle"
          >
            {{ categoryName }}
          </span>
        </div>
        <div class="task-actions">
          <button class="action-btn" @click="editTask">
            <i class="fas fa-edit"></i>
          </button>
          <button class="action-btn" @click="deleteTask">
            <i class="fas fa-trash"></i>
          </button>
        </div>
      </div>
      
      <div class="task-body">
        {{ task.description || '暂无描述' }}
      </div>
      
      <div class="task-footer">
        <div class="task-meta">
          <div class="task-meta-item">
            <i class="fas fa-flag"></i>
            <span class="priority-badge" :class="`priority-${task.priority}`">
              {{ priorityText }}
            </span>
          </div>
          <div class="task-meta-item">
            <i class="fas fa-calendar"></i>
            <span>{{ task.dueDate || '无截止日期' }}</span>
          </div>
        </div>
        
        <div 
          class="status-badge" 
          :class="`status-${task.status}`"
          @click="toggleStatus"
        >
          <i :class="statusIcon"></i> {{ statusText }}
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useTaskStore } from '@/stores/taskStore'
  
  const props = defineProps({
    task: {
      type: Object,
      required: true
    }
  })
  
  const taskStore = useTaskStore()

  const categoryColors = {
    work: { bg: '#e0f7fa', color: '#0097a7' },
    personal: { bg: '#e3f2fd', color: '#1565c0' },
    shopping: { bg: '#fff3e0', color: '#ef6c00' },
    health: { bg: '#fce4ec', color: '#d81b60' }
  }
  
  const statusMap = {
    'pending': { text: '待处理', icon: 'fa-hourglass-half' },
    'in-progress': { text: '进行中', icon: 'fa-spinner' },
    'completed': { text: '已完成', icon: 'fa-check-circle' }
  }
  
  const priorityMap = {
    'low': '低',
    'medium': '中',
    'high': '高'
  }
  
  const categoryMap = {
    'work': '工作',
    'personal': '个人',
    'shopping': '购物',
    'health': '健康'
  }
  
  const categoryStyle = computed(() => {
    const style = categoryColors[props.task.category] || categoryColors.work
    return {
      background: style.bg,
      color: style.color
    }
  })
  
  const categoryName = computed(() => {
    return categoryMap[props.task.category] || '其他'
  })
  
  const statusText = computed(() => {
    return statusMap[props.task.status]?.text || '未知状态'
  })
  
  const statusIcon = computed(() => {
    return `fas ${statusMap[props.task.status]?.icon || 'fa-question'}`
  })
  
  const priorityText = computed(() => {
    return priorityMap[props.task.priority] || '中'
  })
  
  function editTask() {
    taskStore.prepareEditTask(props.task)
    // 跳转到任务详情页，平滑滚动到顶部
    window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
  }
  
  function deleteTask() {
    if (confirm('确定要删除此任务吗？')) {
      taskStore.deleteTask(props.task.id)
    }
  }
  
function toggleStatus() {
  const statusList = ['pending', 'in-progress', 'completed'];
  const currentIndex = statusList.indexOf(props.task.status);
  const nextIndex = (currentIndex + 1) % statusList.length;
  const nextStatus = statusList[nextIndex];

  taskStore.toggleTaskStatus(props.task.id, nextStatus);
}
  </script>
  
  <style scoped>
  .task-card {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 20px;
    transition: var(--transition);
    position: relative;
    animation: fadeIn 0.3s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .task-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }
  
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  
  .task-title {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .task-category {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 10px;
  }
  
  .task-actions {
    display: flex;
    gap: 10px;
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .action-btn:hover {
    background: var(--light);
    color: var(--primary);
  }
  
  .task-body {
    margin-bottom: 15px;
    color: var(--gray);
  }
  
  .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--border);
  }
  
  .task-meta {
    display: flex;
    gap: 15px;
    color: var(--gray);
    font-size: 0.9rem;
  }
  
  .task-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  /* 状态徽章样式 */
  .status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  
  .status-badge:hover {
    transform: scale(1.05);
  }
  
  .status-pending {
    background: #e8eaf6;
    color: #3f51b5;
  }
  
  .status-in-progress {
    background: #fff8e1;
    color: #ff8f00;
  }
  
  .status-completed {
    background: #e8f5e9;
    color: #2e7d32;
  }
  
  .priority-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
  }
  
  .priority-low {
    background: #e6f4ea;
    color: #0f9d58;
  }
  
  .priority-medium {
    background: #fef7e0;
    color: #f9ab00;
  }
  
  .priority-high {
    background: #fce8e6;
    color: #ea4335;
  }
  </style>